<template>
  <div>
    <div style="height:calc(100vh);">
      <relation-graph ref="graphRef" :options="graphOptions" :on-node-click="onNodeClick">
        <template #node="{node}">
          <el-popover placement="right" trigger="hover" open-delay="500">
            <el-button v-if="node.data.type != '分公司'" type="primary"  size="mini" @click="add(node.data)">添加</el-button>
            <el-button type="danger" size="mini" @click="rowDel(node.data.id)">删除</el-button>
            <div slot="reference">
              <div style="width:200px;height: 200px;cursor: pointer;text-align: left;padding:10px;">
                <div style="border-bottom: #ffffff solid 1px;">
                  公司名：{{ node.data.companyName }}
                </div>
                <div style="border-bottom: #ffffff solid 1px;">
                  法人：{{ node.data.corporate }}
                </div>
                <img class="c-person-pic" :src="node.data.logo"/>
              </div>
            </div>
          </el-popover>
        </template>
      </relation-graph>
    </div>

    <el-drawer title="公司信息" size="50%" :visible.sync="isShowEditCompany"
               @close="closeDrawer">
      <el-form :model="company" ref="company" label-width="100px"
               style="width:90%;margin-left: 5%;">
        <el-form-item label="企业名称：" prop="companyName">
          <el-input type="text" v-model="company.companyName">
          </el-input>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="企业简称：" prop="abbreviated">
              <el-input type="text" v-model="company.abbreviated">
              </el-input>
            </el-form-item>
            <el-form-item label="法人：" prop="corporate">
              <el-input type="text" v-model="company.corporate">
              </el-input>
            </el-form-item>
            <el-form-item label="办公电话：" prop="phone">
              <el-input type="text" v-model="company.phone">
              </el-input>
            </el-form-item>
            <el-form-item label="办公地址：" prop="address">
              <el-input type="text" v-model="company.address">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信用代码：" prop="creditCode">
              <el-input type="text" v-model="company.creditCode">
              </el-input>
            </el-form-item>
            <el-form-item label="单位联系人：" prop="contact">
              <el-input type="text" v-model="company.contact">
              </el-input>
            </el-form-item>
            <el-form-item label="电子邮箱：" prop="email">
              <el-input type="text" v-model="company.email">
              </el-input>
            </el-form-item>
            <el-form-item label="微信号：" prop="wechat">
              <el-input type="text" v-model="company.wechat">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="企业类型：" prop="type">
          <el-radio v-if="company.type == '母公司'" v-model="company.type" label="母公司" disabled></el-radio>
          <el-radio v-if="company.type == '子公司'" v-model="company.type" label="子公司" disabled></el-radio>
          <el-radio v-if="company.type == '分公司'" v-model="company.type" label="分公司" disabled></el-radio>
          <el-button type="text" class="pull-right" @click="getdrawer">查看资质证书 ></el-button>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="公众号：" prop="officialAccount" class="item">
              <el-upload class="avatar-uploader" :action='actionAccount' list-type="picture-card"
                         :show-file-list="false" :on-success="accounthandleAvatarSuccess">
                <img v-if="company.officialAccount" :src="company.officialAccount" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公章：" prop="officialSeal" class="item">
              <el-upload class="avatar-uploader" :action='actionSeal' list-type="picture-card"
                         :show-file-list="false" :on-success="sealhandleAvatarSuccess">
                <img v-if="company.officialSeal" :src="company.officialSeal" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="logo：" prop="logo" class="item">
              <el-upload class="avatar-uploader" :action='actionLogo' list-type="picture-card"
                         :show-file-list="false" :on-success="logohandleAvatarSuccess">
                <img v-if="company.logo" :src="company.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="closeDrawer" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="资质证书" ref="drawer" :visible.sync="drawer" direction="rtl" size="30%">
      <el-form :model="zsForm" ref="zsForm" class="demo-formFileds">
        <el-form-item label="营业执照：" prop="yyzz">
          <el-upload :action="yyzzactionurl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove1" :on-change="handleChange1" :limit="1" :file-list="fileList1"
                     :class="{ hide_box1: upload_btn1 }">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="资质证明：">
          <el-upload :action="zzzmactionurl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove2" :on-change="handleChange2" :file-list="fileList2"
                     :class="{ hide_box2: upload_btn2 }" :limit="2">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitzsForm()" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="dialogClose" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <div class="dialog">
      <el-dialog :visible.sync="dialogVisible" width="50%">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>

    <!-- 弹出层 -->
    <EnterpriseAdd ref="enterpriseAddRef" v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" :type="type"
                   :parent="parent" :qyid="qyid" :father="father" @dialogClose="dialogClose" @Ok="getCompany"></EnterpriseAdd>
  </div>
</template>

<script>
import {
  correlationId,
  del,
  selectByUserId,
  selectByUserId2,
  updateInformation,
} from '@/api/systemManage/enterpriseMaage'
import EnterpriseAdd from "@/view/personal/enterprise/enterpriseAdd.vue";

export default {
  name: 'Company',
  components: {EnterpriseAdd},
  data() {
    return {
      slotTeamplateId: '',
      graphOptions: {
        defaultJunctionPoint: 'tb', // 默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）
        defaultNodeColor: '#65beff',
        defaultNodeShape: 1,
        defaultNodeBorderWidth: 0,
        disableDragNode: true, // 禁用图谱中节点的拖动
        disableZoom: false, // 禁用图谱的缩放功能
        disableLineClickEffect: true, //禁用线条默认的点击效果（选中、闪烁）
        allowShowMiniToolBar: false, // 是否显示工具栏
        defaultExpandHolderPosition: 'bottom', //默认的节点展开/关闭按钮位置（left/top/right/bottom/hide）


        layouts: [
          {
            layoutName: 'tree',
            from: 'top',
            centerOffset_x: 0,
            centerOffset_y: 0
          }
        ],
      },
      company: {},
      isShowEditCompany: false,

      qyid: '',
      drawer: false,
      dialogImageUrl: '',
      upload_btn1: false,
      upload_btn2: false,
      dialogVisible: false,
      fileList1: [],
      fileList2: [],
      zsForm: {},
      yyzzactionurl: '/api/company/yyzzUpload',
      zzzmactionurl: '/api/company/zzzmUpload',
      data: [],
      formtree: false,
      // linkData: [],
      actionAccount: '/api/company/gzhUpload',
      actionLogo: '/api/company/logoUpload',
      actionSeal: '/api/company/officialSealUpload',
      accountUrl: '',
      logoUrl: '',
      sealUrl: '',

      parent: false,
      type: '',
      record: '',
      father: 0,

      isShowAddDialog: false,
      linkShow: false,
      rules: {
        companyName: [
          {required: true, message: '请输入企业名称', trigger: 'change'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'change'}
        ],
        abbreviated: [
          {required: true, message: '请输入企业简称', trigger: 'change'}
        ],
        address: [
          {required: true, message: '请输入公司地址', trigger: 'change'}
        ],
        contact: [
          {required: true, message: '请输入单位联系人姓名', trigger: 'change'}
        ],
        phone: [
          {required: true, message: '请输入联系电话', trigger: 'change'}
        ]
      }
    };
  },
  mounted() {
    this.getCompany();
    //this.showGraph();
  },
  methods: {
    showGraph() {
      const __graph_json_data = this.companyData
      this.$refs.graphRef.setJsonData(__graph_json_data)
    },
    getCompany() {
      selectByUserId2().then((res) => {
        const __graph_json_data = res.data
        this.$refs.graphRef.setJsonData(__graph_json_data)
        this.closeDrawer()
        this.dialogClose()
        this.isShowAddDialog = false
      })
    },
    onNodeClick(nodeObject, $event) {
      this.company = nodeObject.data
      this.isShowEditCompany = true;
    },
    onLineClick(lineObject, linkObject, $event) {
      console.log('onLineClick:', lineObject);
    },
    closeDrawer() {
      this.isShowEditCompany = false;

    },

    sealhandleAvatarSuccess(file) {
      this.company.officialSeal = file.data;
    },
    logohandleAvatarSuccess(file) {
      this.company.logo = file.data;
    },
    accounthandleAvatarSuccess(file) {
      this.company.officialAccount = file.data;
    },
    dialogClose() {
      this.isShowAddDialog = false;
      this.linkShow = false;
      this.drawer = false;
    },
    submitForm() {
      this.$refs.company.validate((valid) => {
        if (valid) {
          updateInformation(this.company).then((res) => {
            if (res) {
              this.$message.success('修改成功！')
              this.getCompany()
            }
          })
        } else {
          return
        }
      });
    },
    submitzsForm() {
      return new Promise((resolve, reject) => {
        if (this.fileList1.length == 1) {
          if (!this.fileList1[0].response) {
            this.zsForm.yyzz = this.fileList1[0].url
          } else {
            this.zsForm.yyzz = this.fileList1[0].response.data
          }
        } else {
          this.zsForm.yyzz = ''
        }
        if (this.fileList2.length == 1) {
          if (!this.fileList2[0].response) {
            this.zsForm.zzzm = this.fileList2[0].url
            this.zsForm.zzzm2 = ''
          } else {
            this.zsForm.zzzm = this.fileList2[0].response.data
            this.zsForm.zzzm2 = ''
          }

        } else if (this.fileList2.length == 2) {
          if (!this.fileList2[0].response) {
            this.zsForm.zzzm = this.fileList2[0].url
          } else {
            this.zsForm.zzzm = this.fileList2[0].response.data
          }
          if (!this.fileList2[1].response) {
            this.zsForm.zzzm2 = this.fileList2[1].url
          } else {
            this.zsForm.zzzm2 = this.fileList2[1].response.data
          }
        } else {
          this.zsForm.zzzm = ''
          this.zsForm.zzzm2 = ''
        }
        resolve(this.zsForm)
      }).then(data => {
        updateInformation(data).then((res) => {
          if (res) {
            this.$message.success('上传成功！')
            this.drawer = false
          }
        })
      }).catch(() => {

      })


    },
    rowDel(id) {
      this.$confirm('确定要删除当前公司吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        del('id=' + id).then((res) => {
          if (res) {
            this.$message.success('删除成功！');
            this.getCompany();
            this.company = []
          }
        })
      });
    },
    push() {
      if (this.data == null) {
        this.type = '空'
        this.qyid = -1
      } else if (this.data[0].type == '子公司') {
        this.type = '子'
        this.qyid = this.data[0].id
      }
      this.isShowAddDialog = true
    },
    add(data) {
      this.type = data.type
      this.father = data.id
      this.isShowAddDialog = true
      this.qyid = data.id
    },

    link() {
      if (!this.data) {
        this.$message.warning('请先添加公司！')
      } else {
        let params = localStorage.getItem('userId')
        correlationId('userId=' + params).then((res) => {
          if (res.data) {
            this.record = res.data
            this.linkShow = true
          }
        })
      }

    },
    getdrawer() {
      this.zsForm = this.company
      this.fileList1 = []
      this.fileList2 = []
      this.upload_btn1 = false
      this.upload_btn2 = false
      this.getTheDrawer()
    },
    getTheDrawer() {
      this.drawer = true
      if (this.zsForm.yyzz) {
        this.fileList1.push({})
        this.fileList1[0].url = this.zsForm.yyzz
        this.upload_btn1 = true
      }
      if (this.zsForm.zzzm) {
        this.fileList2.push({})
        this.fileList2[0].url = this.zsForm.zzzm
      }
      if (this.zsForm.zzzm2) {
        this.fileList2.push({})
        this.fileList2[1].url = this.zsForm.zzzm2
        this.upload_btn2 = true
      }

    },
    handleRemove1(file, filelist) {
      this.upload_btn1 = false
      this.fileList1 = filelist
    },
    handleRemove2(file, filelist) {
      this.fileList2 = filelist
      if (filelist.length == 0) {
        this.fileList2 = []
      }
      if (filelist.length < 2) {
        this.upload_btn2 = false
      }
      // console.log('filst', this.fileList2)
    },
    handleChange1(file, filelist) {
      this.upload_btn1 = true
      this.fileList1 = filelist
    },
    handleChange2(file, filelist) {
      if (filelist.length == 2) {
        this.upload_btn2 = true
      }
      this.fileList2 = filelist
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
}
</script>
<style lang="scss" scoped>
.c-node-menu-item {
  line-height: 30px;
  padding-left: 10px;
  cursor: pointer;
  color: #444444;
  font-size: 14px;
  border-top: #efefef solid 1px;
}

.c-node-menu-item:hover {
  background-color: rgba(66, 187, 66, 0.2);
}

.c-person-pic {
  width: 120px;
  border-radius: 50%;
  margin: 10px 30px;
}

::v-deep .relation-graph {
  .rel-node {

  }

  .rel-node-checked {
    box-shadow: rgba(66, 155, 187, 0.3) 0px 0px 0px 8px;
  }
}
</style>
<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}

.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding-right: 8px;
}

:deep .el-tree-node__content {
  height: 35px;
}

:deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

:deep .el-form-item__label {
  position: relative;
  display: inline-block;
  text-align-last: justify;
}

.item :deep .el-form-item__label {
  text-align-last: right;
  font-size: 13px;
}

.demo-company :deep .el-form-item--medium .el-form-item__label::before {
  display: none;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.avatar {
  width: 146px;
  height: 146px;
  object-fit: contain;
  display: block;
}

/deep/ .el-drawer__header {
  background-color: #2EB3FF;
  align-items: center;
  color: #fff;
  height: 60px;
  margin-bottom: 15px;
  font-weight: bold;

}

.dialog :deep .el-dialog__header {
  display: none;
}

.hide_box1 /deep/ .el-upload--picture-card {
  display: none;
}

.hide_box2 /deep/ .el-upload--picture-card {
  display: none;
}
</style>
